<template>
	<view class="device">
		<view class="cu-modal bottom-modal" :class="pwdDialog=='checkPwd'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar">
					<view class="content">密码校验</view>
					<view class="action text-white" @tap="checkPwd">确定</view>
					<view class="action text-white" @tap="hidePwd">取消</view>
				</view>
				<view class="padding-xl">
					<view class="input-text-voice-super">
						<text class="action text-white">请输密码</text>
						<input v-model="password" type="password" class="chat-input-style" placeholder="请输入密码" />
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='controls'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar justify-end">
					<view class="content">设备控制</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>

				<view class="padding-xl">
					<!-- 检索（区域/投影/幕布） -->
					<view class='select_box'>
						<Select class="margin-right-sm" :prop-array='areaList' :isShowSelectOpt="isShowSelectOpt" prop-type='name' prop-color='4' @selectClick="selectClick"></Select>
						<Select class="margin-right-sm" :prop-array='selectData' :isShowSelectOpt="isShowSelectOpt" prop-type='name' prop-color='2' @selectClick="selectClick"></Select>
						<!-- <Select :prop-array='areaList' :isShowSelectOpt="isShowSelectOpt" prop-type='name' prop-color='2' @selectClick="selectClick"></Select> -->
						<text @tap="toAddDevice" class="cuIcon-roundadd justify-end" style="font-size: 24px;"></text>
					</view>
					<view class="text-right">
						<!-- <button hover="true" hover-class="btnhover" class="chat-input-send-button-style">全部</button> -->
						<!-- <button hover="true" hover-class="btnhover" class="chat-input-send-button-style">设备</button> -->
						<!-- <button hover="true" hover-class="btnhover" class="chat-input-send-button-style">地址</button> -->
					</view>
					<view style="height: 250px; overflow: auto;">
						<view class="cu-list grid col-3 no-border">
							<view @tap="controlDevice" class="cu-item" v-for="(item,index) in deviceList" :key="index" :data-item="item">
								<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]"></view>
								<text class="colorStyle" style="color: #fff;">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar justify-center" style="border-top: 1px solid #ccc;border-bottom: none;">
					<view class="action">
						<button hover="true" hover-class="btnhover" @tap="allOpenDevice" class="chat-input-send-button-style">全部开启</button>
						<button hover="true" hover-class="btnhover" @tap="allCloseDevice" class="chat-input-send-button-style">全部关闭</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加设备 -->
		<view class="cu-modal bottom-modal" :class="dialog=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar">
					<view class="content">添加设备</view>
					<view class="action text-white" @tap="addDevice">确定</view>
					<view class="action text-white" @tap="hideDevice">取消</view>
				</view>
				<view class="padding-xl">
					<view class='input-text-voice-super' style="width: 100%;">
						<text class="action text-white">区域</text>
						<selectTwo :prop-array='areaList' prop-type='name' :isShowSelect="isShowSelect" prop-color='2' @selectClick="selectClick2"
						 style="width: 92%;"></selectTwo>
					</view>
					<view class="input-text-voice-super">
						<text class="action text-white">命令</text>
						<input v-model="command" type="text" class="chat-input-style" placeholder="请输入设备命令" />
					</view>
					<view class="input-text-voice-super">
						<text class="action text-white">名称</text>
						<input v-model="deviceName" type="text" class="chat-input-style" placeholder="请输入设备名称" />
					</view>
					<view class="input-text-voice-super">
						<text class="action text-white">地址</text>
						<input v-model="deviceAddr" type="text" class="chat-input-style" placeholder="请输入地址" />
					</view>
				</view>
			</view>
		</view>

		<!-- 控制设备 -->
		<view class="cu-modal bottom-modal" :class="controlDialog=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar justify-end">
					<view class="content">{{controlDeviceName}}</view>
					<view class="action" @tap="hideControl">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<button hover="true" hover-class="btnhover" @tap="openDevice" class="chat-input-send-button-style">开启设备</button>
					<button hover="true" hover-class="btnhover" @tap="closeDevice" class="chat-input-send-button-style">关闭设备</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import utils from '../../utils/util.js';
	import websocket from '../../utils/websocket.js';
	import Select from '../../components/select/select.vue'
	import selectTwo from '../../components/select/select_two.vue'

	export default {
		components: {
			Select,
			selectTwo
		},
		data() {
			return {
				pwdDialog: '',
				modalName: '',
				dialog: '',
				controlDialog: '',
				password: '',
				deviceNum: '', //编号
				activeArea: '', //选中区域
				command: '',
				deviceName: '', //设备名字
				deviceAddr: '', //地址
				controlDeviceName: '', //控制的设备名称
				deviceInfo: '', //设备信息
				areaList: [{
					id: 0,
					text: '全部区域'
				}, {
					id: 1,
					text: '区域1'
				}, {
					id: 2,
					text: '区域2'
				}, {
					id: 3,
					text: '区域3'
				}, {
					id: 4,
					text: '区域4'
				}, {
					id: 5,
					text: '区域5'
				}, {
					id: 6,
					text: '区域6'
				}, {
					id: 7,
					text: '区域7'
				}, {
					id: 8,
					text: '区域8'
				}, {
					id: 9,
					text: '区域9'
				}, {
					id: 10,
					text: '区域10'
				}],
				selectData: [{
					id: 1,
					text: '设备1'
				}, {
					id: 2,
					text: '设备2'
				}],
				shadowList:[{//投影
					id: 1,
					text: '投影1'
				},{
					id: 2,
					text: '投影2'
				}],
				muBuList:[{
					id: 1,
					text: '幕布1'
				},{
					id: 2,
					text: '幕布2'
				}],
				deviceList: [{
					cuIcon: 'videofill',
					color: 'red',
					name: '设备1'
				}, {
					cuIcon: 'videofill',
					color: 'orange',
					name: '设备2'
				}, {
					cuIcon: 'videofill',
					color: 'yellow',
					name: '设备3'
				}, {
					cuIcon: 'videofill',
					color: 'olive',
					name: '设备4'
				}, {
					cuIcon: 'videofill',
					color: 'cyan',
					name: '设备5'
				}, {
					cuIcon: 'videofill',
					color: 'blue',
					name: '设备6'
				}],
				colorArr: ['red', 'orange', 'yellow', 'olive', 'cyan', 'blue'],
				isShowSelect: false,
				isShowSelectOpt: false
			}
		},
		onShow: function() {
			console.log('onShow');
			console.log(app.globalData.userInfo);
			this.createConnect();
		},
		onHide: function() {
			console.log("onhide");
			clearInterval(timer);
			uni.closeSocket();
		},
		onUnload: function() {
			console.log("onUnload");
			clearInterval(timer);
			uni.closeSocket();
		},
		created() {

		},
		mounted() {

		},
		methods: {
			checkPwd() { //校验密码
				if (this.password == 'szhssj') {
					this.modalName = 'controls'
					this.pwdDialog = '';
					this.password = '';
				} else {
					this.password = '';
					uni.showToast({
						title: '密码错误,请重新输入...',
						icon: 'none'
					})
				}
			},
			createConnect() {
				page = 1;
				hadLastPage = false;

				var connectData = utils.getStor('connectData') || '';
				console.log("ip:" + connectData);
				if (connectData == '' || connectData == undefined) {
					this.setData({
						items: []
					});
					if (this.notScanCode) {
						uni.showToast({
							title: '登录已过期，请重新扫码',
							icon: "none",
							duration: 2000
						});
					}
					this.setData({
						notScanCode: true
					});
					return;
				} else {
					this.setData({
						ip: connectData
					});
					var that = this;

					websocket.connect(this.ip, function(res) {
							console.log("接受服务器返回来的消息");
							// console.log(res);
							// 服务器主动断开连接
							if (res.data == "_sclose_") {
								clearInterval(timer);
							} else if (res.data == "ok") {
								console.log("心跳发送成功");
							} else {
								var jsonObj = JSON.parse(res.data);
								console.log(jsonObj, '收到服务器内容');

								if (jsonObj.command == "sendctrl") {
									if (jsonObj.result == "FAILED") {
										if (jsonObj.pfailMsg != undefined && jsonObj.pfailMsg != null && jsonObj.pfailMsg != "") {
											uni.showToast({
												title: jsonObj.pfailMsg,
												icon: 'none',
												duration: 2000
											})
										} else {
											if (jsonObj.message != undefined && jsonObj.message != null && jsonObj.message != "") {
												uni.showToast({
													title: jsonObj.message,
													icon: 'none',
													duration: 2000
												})
											} else {
												uni.showToast({
													title: '操作失败!',
													icon: 'none',
													duration: 2000
												})
											}
										}
									} else {

									}
								}
							}
						},
						function(res) {
							console.log("☆☆☆☆☆连接登陆☆☆☆☆☆", app.globalData.loginType);
							// console.log('{ "command": "login", "nickName": "' + app.globalData.userInfo.nickName + '", "avatarUrl": "' + app.globalData.userInfo.avatarUrl + '","code":"' + app.globalData.authcode + '","iv":"' + app.globalData.iv + '","encryptedData":"' + app.globalData.encryptedData + '","roomcode":"' + app.globalData.roomcode + '"}');
							let loginInfo = {
								"command": 'login',
								"nickName": app.globalData.userInfo.nickName,
								"avatarUrl": app.globalData.userInfo.avatarUrl,
								"type": app.globalData.loginType
							}

							websocket.send(JSON.stringify(loginInfo))


							//获取幕布号
							let data = {
								"command": "getsetting",
								"queryAll": "1"
							}

							websocket.send(JSON.stringify(data))

							let dataMsg = {
								"command": "getAllClassify",
								"mubuIndex": Number(app.globalData.mubuIndex)
							}
							websocket.send(JSON.stringify(dataMsg))
						});
				}
			},
			selectClick: function(res) {
				//获取点击事件的信息
				let clickInfo = res
				console.log(clickInfo);
			},
			// 点击下拉列表
			selectClick2: function(res) {
				//获取点击事件的信息
				let clickInfo = res
				console.log(clickInfo);
				this.activeArea = clickInfo.text;
			},
			toAddDevice() { //添加设备窗口
				this.dialog = "bottomModal";
				this.isShowSelect = true;
			},
			addDevice(e) {

				if (this.activeArea == '') {
					uni.showToast({
						title: '请选择区域',
						icon: 'none'
					})

					return false;
				}


				if (this.command == '') {
					uni.showToast({
						title: '请输入设备命令',
						icon: 'none'
					})

					return false;
				}


				if (this.deviceName == '') {
					uni.showToast({
						title: '请输入设备名称',
						icon: 'none'
					})

					return false;
				}

				if (this.deviceAddr == '') {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})

					return false;
				}

				console.log(this.deviceName, 'deviceName')
				let dataMsg = {
					cuIcon: 'videofill',
					color: this.colorArr[Math.floor((Math.random() * this.colorArr.length))],
					name: this.deviceName
				}

				this.deviceList.push(dataMsg)
				this.deviceName = '';
				this.dialog = '';
				this.isShowSelect = false;
			},
			controlDevice(e) { //控制设备弹窗
				console.log(e, 'controlDevice')
				this.deviceInfo = e.currentTarget.dataset.item;
				this.controlDeviceName = e.currentTarget.dataset.item.name;
				this.controlDialog = "bottomModal";
			},
			allOpenDevice() { //全部开启
				uni.showToast({
					title: '程序猿正拼命开发中...',
					icon:'none'
				})
			},
			allCloseDevice() { //全部关闭
				uni.showToast({
					title: '程序猿正拼命开发中...',
					icon:'none'
				})
			},
			openDevice() { //开启设备
				uni.showToast({
					title: '开启 ' + this.deviceInfo.name + ' 设备',
					icon: 'none'
				})
			},
			closeDevice() { //关闭设备
				uni.showToast({
					title: '关闭 ' + this.deviceInfo.name + ' 设备',
					icon: 'none'
				})
			},
			hidePwd() { //隐藏密码弹窗
				this.password = '';
				this.pwdDialog = '';
			},
			hideModal() { //隐藏设备列表
				this.modalName = '';
				this.isShowSelectOpt = false
			},
			hideDevice() { //隐藏添加设备列表
				this.dialog = '';
				this.activeArea = ''; //清空选中区域
				this.command = ''; //清空命令
				this.deviceName = ''; //清空设备名称
				this.deviceAddr = ''; //清空地址
				this.isShowSelect = false;
			},
			hideControl() { //隐藏控制按钮
				this.controlDialog = '';
			}
		}
	}
</script>

<style scoped>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css";

	.cu-dialog {
		color: #fff;
		background-color: #535178;
	}

	.cu-bar {
		border-bottom: 1px solid #ccc;
	}

	.chat-input-send-button-style {
		width: 170rpx;
		height: 70rpx;
		line-height: 35rpx;
		padding: 0 10rpx;
		font-size: 30rpx;
		text-align: center;
		margin-right: 25rpx;
		border-radius: 15rpx;
		border: 1rpx solid #ffffff;
		color: #ffffff;
		background-color: transparent;
	}

	.btnhover {
		border: 1rpx solid #ffffff;
		color: #fff;
		background-color: #3A3A52;
	}

	button::after {
		border: none !important;
	}

	.margin-top-lg {
		margin-top: 20rpx;
	}

	/* 下拉 */

	.select_box {
		/* width:45%;
	  height:70%; */
		position: relative;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		color: #ffffff;
	}

	.select_box .select {
		background-color: #ffe570;
		box-sizing: border-box;
		height: 52rpx;
		width: 240rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.select_box .select .select_text {
		font-size: 26rpx;
		line-height: 28rpx;
		text-align: center;
	}

	.select_box .select .select_img {
		width: 30rpx;
		height: 30rpx;
		display: block;
		transition: transform 0.3s;
		position: absolute;
		right: 20rpx;
	}

	.select_box .select .select_img_rotate {
		transform: rotate(180deg);
	}

	.select_box .option_box {
		position: absolute;
		top: 51rpx;
		width: 243rpx;
		box-sizing: border-box;
		height: 0;
		overflow-y: auto;
		background: #ffe570;
		transition: height 0.3s;
		text-align: center;
		border-left: 1rpx solid #fff;
		border-right: 1rpx solid #fff;
		border-top: 1rpx solid #fff;
	}

	.select_box .option_box .option {
		display: block;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #fff;
	}

	.device>>>.cu-list {
		background-color: #535178;
	}

	.device>>>.colorStyle {
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.input-text-voice-super {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
		z-index: 20;
		margin-bottom: 5px;
	}

	.chat-input-style {
		border-radius: 20rpx;
		border: 1rpx solid #fff;
		margin-top: 14rpx;
		margin-bottom: 13rpx;
		padding: 10rpx 20rpx;
		min-height: 85rpx;
		color: #ffffff;
		margin-left: 20rpx;
		width: 80%;
		font-size: 16px;

	}

	.chat-input-send-button-style {
		display: inline-block;
		width: 170rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 10rpx;
		font-size: 30rpx;
		text-align: center;
		margin: 0 45rpx 0 20rpx;
		border-radius: 15rpx;
		border: 1rpx solid #fff;
		color: #fff;
		background-color: transparent;
	}

	.btnhover {
		border: 1rpx solid #ffffff;
		color: #3A3A52;
		background-color: #ffffff;
	}
	
	.margin-right-sm{
		margin-right: 15rpx;
	}
</style>
